import React, { useState, useCallback,useEffect } from 'react'

export default function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        console.log('useCallback')
        return count;
    }, [count]);
    console.log('Parent')
    return <div>
        <h4>{count}</h4>
        <h4>{callback()}</h4>
        {/* <Child callback={callback}/> */}
        <div>
            <button onClick={() => {console.log('onClick');setCount(count + 1)}}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}
 
function Child({ callback }) {
    console.log('child')
    const [count, setCount] = useState(() => { console.log('useState'); return 0});
    // const [count, setCount] = useState(34);
    useEffect(() => {
        setCount(callback());
        console.log('child useEffect')
    }, [callback]);
    return <div title="child">
        child组件：{count}
    </div>
}

// import React, { useState, useCallback } from 'react';
 
// const set = new Set();
 
// export default function Callback() {
//     const [count, setCount] = useState(1);
//     const [val, setVal] = useState('');
 
//     const callback = useCallback(() => {
//         console.log(count);
//     }, [count]);
//     set.add(callback);
 
//     return <div>
//         <h4>{count}</h4>
//         <h4>{set.size}</h4>
//         <h4>{callback()}</h4>
//         <div>
//             <button onClick={() => setCount(count + 1)}>+</button>
//             <input value={val} onChange={event => setVal(event.target.value)}/>
//         </div>
//     </div>;
// }